<template>
    <div class="message">

        <h2>基础信息</h2>

        <!-- 中间输入搜索框 -->

        <el-form :model="form" ref="form" :rules="rules" :visible.sync="open" size="small" label-width="120px"
            :inline="true">
            <!-- 弹出框查询搜索 -->
            <!-- 工单主题 -->
            <el-form-item label="工单主题" prop="proName">
                <el-input v-model="form.projectNo" placeholder="请输入工单主题" @keyup.enter.native="handleQuery"><i
                        slot="suffix" class="el-icon-s-order" @click="showFile"></i>
                </el-input>
            </el-form-item>
            <!-- 工单编号 -->
            <el-form-item label="工单编号" prop="receiptMaterialNo">
                <el-input v-model="queryParams.receiptMaterialNo" placeholder="请输入工单编号" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item><br>
            <!-- 关联项目 -->
            <el-form-item label="关联项目" prop="projectNo">
                <el-select v-model="queryParams.projectNo" placeholder="请选择关联项目" clearable size="mini">
                    <el-option v-for="dict in binding_status " :key="dict.dictValue" :label="dict.dictLabel"
                        :value="dict.dictValue" />
                </el-select>
            </el-form-item><br>
            <!-- 计划开始时间 -->
            <el-form-item label="计划开始时间" prop="receiptMaterialNo">
                <el-input v-model="queryParams.receiptMaterialNo" placeholder="请输入收货地址" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- 计划结束时间 -->
            <el-form-item label="计划结束时间" prop="proTime">
                <el-input v-model="queryParams.receiptMaterialNo" placeholder="请输入发货时间" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
        </el-form>



        <h3 style="font-size: 24px;width: 141px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  margin: 10px  0  0  5px;">生产构件</h3>
        <template>
            <el-row>
                <el-button type="primary" @click="accretion">添加</el-button>
                <el-button type="warning">移除</el-button>
            </el-row>
        </template>
        <div style="float: right; ">
            构件总数量：<span style="color:red">
                12
            </span>
            构件总重量：
            <span style="color:red">
                123
            </span>
        </div>
        <!-- 下面表格 -->
        <div class="tables" style="margin-top:20px;">
            <el-form>
                <el-table border ref="multipleTable" :data="Lit" tooltip-effect="dark" style="width: 100%">
                    <!-- @selection-change="handleSelectionChange" -->
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column label="序号" prop="id" width="120">
                    </el-table-column>
                    <el-table-column prop="materialType" label="构建编号" width="120">
                    </el-table-column>
                    <el-table-column prop="warehouseName" label="构建名称" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="updateTime" label="构建类型" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="specifications" label="规格" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="length" label="长度" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="count" label="单净重量" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="count" label="构建bom" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="count" label="剩余生产数量" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="count" label="工单排产数量" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.count" @change="inputChangeNumber(scope.row)"
                                controls-position="right" :min="0" :max="scope.row.remainderCount" label="描述文字">
                            </el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="count" label="楼栋" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="count" label="楼层" show-overflow-tooltip>

                    </el-table-column>
                </el-table>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="Off">取消</el-button>
                <el-button type="primary" @click="keep">保存</el-button>
            </div>
        </div>


        <!-- 工艺流程================================================================ -->
        <h3 style="font-size: 24px;width: 141px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  margin: 10px  0  0  5px;">工艺流程</h3>
        <template>
            <el-row>
                <el-button type="primary" @click="technologyAdd">添加</el-button>
                <el-button type="primary">移除</el-button>
                <el-button type="primary">修改</el-button>
            </el-row>
        </template>
        <div style="float: right; ">
            构件总数量：<span style="color:red">
                12
            </span>
            构件总重量：
            <span style="color:red">
                123
            </span>
        </div>
        <!-- 下面表格 -->
        <div class="tables" style="margin-top:20px;">
            <el-form>
                <el-table border ref="multipleTable" :data="Lit" tooltip-effect="dark" style="width: 100%">
                    <!-- @selection-change="handleSelectionChange" -->
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column label="序号" prop="id" width="120">
                    </el-table-column>
                    <el-table-column prop="materialType" label="构建编号" width="120">
                    </el-table-column>
                    <el-table-column prop="warehouseName" label="构建名称" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="updateTime" label="构建类型" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="specifications" label="规格" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="length" label="长度" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="count" label="单净重量" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="count" label="构建bom" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="count" label="剩余生产数量" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="count" label="工单排产数量" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.count" @change="inputChangeNumber(scope.row)"
                                controls-position="right" :min="0" :max="scope.row.remainderCount" label="描述文字">
                            </el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="count" label="楼栋" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="count" label="楼层" show-overflow-tooltip>

                    </el-table-column>
                </el-table>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="Off">取消</el-button>
                <el-button type="primary" @click="keep">保存</el-button>
            </div>
        </div>


        <!-- 构件添加弹出框 -->
        <el-dialog title="添加构件" :visible.sync="dialogTableVisible">
            <el-form size="small" label-width="68px" :inline="true">
                <!-- 弹出框查询搜索 -->
                <!-- 构件类型 -->
                <el-form-item label="构件类型" prop="floor">
                    <el-select v-model="queryParams.floor" filterable allow-create default-first-option
                        @change="selects" placeholder="构件类型">
                        <el-option v-for="item in  xialakuang" :key="item.value" :label="item.floor"
                            :value="item.floor">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 构件名称 -->
                <el-form-item label="构件名称" prop="receiptMaterialNo">
                    <el-input v-model="queryParams.receiptMaterialNo" placeholder="请输入构件名称" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <!-- 楼栋 -->
                <el-form-item label="楼栋" prop="buildNo">
                    <el-select v-model="queryParams.buildNo" filterable allow-create default-first-option
                        @change="selects" placeholder="楼栋">
                        <el-option v-for="item in  xialakuang" :key="item.value" :label="item.buildNo"
                            :value="item.buildNo">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 楼层 -->
                <el-form-item label="楼层" prop="floor">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.count" @change="inputChangeNumber(scope.row)"
                            controls-position="right" :min="0" label="描述文字">
                        </el-input-number>
                    </template>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>



                <br>已勾选：<span></span>
                <div style="float: right; ">
                    构件数量：<span style="color:red">
                        12
                    </span>
                    重量：
                    <span style="color:red">
                        123
                    </span>
                </div>
                <el-table border ref="multipleTable" :data="Lit" tooltip-effect="dark" style="width: 100%">
                    <!-- @selection-change="handleSelectionChange" -->
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column label="序号" prop="id" width="120">
                    </el-table-column>
                    <el-table-column prop="materialType" label="构建编号" width="120">
                    </el-table-column>
                    <el-table-column prop="warehouseName" label="构建名称" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="updateTime" label="构建类型" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="specifications" label="规格" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="length" label="长度" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="count" label="单净重量" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="count" label="楼栋" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="count" label="楼层" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="count" label="库存数量" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="count" label="计划发货数量" width="120" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.count" @change="inputChangeNumber(scope.row)"
                                controls-position="right" :min="0" :max="scope.row.remainderCount" label="描述文字">
                            </el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="count" label="发货数量" show-overflow-tooltip>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
                <div style="margin-top: 20px; text-align: center">
                    <el-form-item>
                        <el-button @click="dialogTableVisible = false">取消</el-button>
                        <el-button type="primary" @click="dialogTableVisible = false">添加</el-button>
                    </el-form-item>
                </div>
            </el-form>

        </el-dialog>



        <!-- 工艺 添加弹出框=========================================================================== -->
        <el-dialog title="选择工艺流程" :visible.sync="technologyOped">
            <el-form size="small" label-width="68px" :inline="true" ref="form" :model="form">
                <div style="float:right;margin-right: 15px;">
                    <el-form-item label="工单主题" prop="proName" >
                    <el-input v-model="form.projectNo" placeholder="请输入工单主题" @keyup.enter.native="handleQuery"><i
                            slot="suffix" class="el-icon-zoom-in" @click="serch"></i>
                    </el-input>
                </el-form-item>
                </div>
                <el-table border ref="multipleTable" align="center" :data="Lit" tooltip-effect="dark"
                    style="width: 100%">
                    <!-- @selection-change="handleSelectionChange" -->
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column label="序号" prop="id" width="120">
                    </el-table-column>
                    <el-table-column prop="materialType" label="工艺流程编号" width="120">
                    </el-table-column>
                    <el-table-column prop="warehouseName" label="工艺流程名称" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="updateTime" label="工序数量" show-overflow-tooltip>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
                <div style="margin-top: 20px; text-align: center">
                    <el-form-item>
                        <el-button @click="technologyOped = false">取消</el-button>
                        <el-button type="primary" @click="craft">添加</el-button>
                    </el-form-item>
                </div>
            </el-form>

        </el-dialog>

    </div>

</template>
<script>

import { } from "@/api/material/MaterialInfo";
export default {
    data() {
        return {
            // 备注
            textarea: '',
            // 构件弹框
            dialogTableVisible: false,
            // 工艺弹框
            technologyOped: false,
            form: {},
            lit: [],
            // 是否显示弹出层
            open: false,
            // 弹框查询left
            checked: [],

            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                createBy: null,
                proTime: null,
                proName: null,
                receiptMaterialNo: null,
                categoryName: null,
                supplierTheme: null,
                supplierName: null,
                materialType: null,
                warehouseName: null,
                warehouseArea: null,
                materialPerson: null,
                materialTime: null,
                projectNo: null,
                categoryNo: null,
                specifications: null,
                unit: null,
                materialName: null,
                count: null,
                updateTime: null,
                updateBy: null,
                createTime: null,
                // 楼栋
                buildNo: null,
                floor: null,
                // 数字选择
                remainderCount: null,

            },
            // 表单校验
            rules: {
                proName: [
                    { required: true, message: "收料主题不能为空", trigger: "change" },
                ],
                proTime: [
                    { required: true, message: "收料主题不能为空", trigger: "change" },
                ],
            },
        }
    },
    created() {
    },
    methods: {
        // 工艺流程搜索==================================================
        serch() {
            console.log("搜索")
        },
        // 工艺流程添加========================================================================================================
        technologyAdd() {
            this.technologyOped = true
        },
        // 图标点击
        showFile() {
            console.log(1232132123)
        },
        // 工艺弹窗添加按钮
        craft(){
            this.$modal.confirm('剩余生产数量少于工单排产数量，请重新填写')
            this.technologyOped = false
        },
        // 添加弹框的按钮
        accretion() {
            this.dialogTableVisible = true;
        },
        handleUpdate() {
            this.dialogTableVisible = true
        },
        // 下面表格取消按钮
        Off() {
            // this.$router.go(-1)
        },
        // 下面表格确定按钮
        keep() {
            this.$refs["form"].validate()
        }
    },
    // 表单重置
    reset() {
        this.form = {
            id: null,
            proName: null,
            receiptMaterialNo: null,
            supplierTheme: null,
            supplierName: null,
            categoryName: null,
            materialType: null,
            summary: null,
            warehouseName: null,
            warehouseArea: null,
            materialPerson: null,
            materialTime: null,
            supplierNo: null,
            transportUnit: null,
            carNumber: null,
            freight: null,
            categoryNo: null,
            createTime: null,
            createBy: null,
            comment: null,
            projectNo: null,
            specifications: null,
            unit: null,
            materialName: null,
            count: null,
            remainderCount: null,
        };
        this.resetForm("form");
    },
}
</script>
<style lang="scss" scoped>
h2 {
    width: 141px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    border-bottom: 1px solid red;
    margin: 40px 0 10px 5px;

}

.el-input__inner {
    border: 1px solid;
}

.dialog-footer {
    text-align: center;
    margin-top: 15px;

}

.outers .headers {
    width: 100%;
    height: 50px;

    border-bottom: 1px solid gainsboro;

    h1 {
        margin-left: 50px;
        padding-top: 10px;
    }
}

.bottom {
    margin-left: 30px;
    margin-top: 0px;

    .adds {
        display: flex;
        margin-bottom: 10px;
    }
}

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.message {
    padding-left: 20px;
    width: 50%vh;
    height: 170px;
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
    border-radius: 1rem;
    margin-top: 15px;

    span {
        font-size: 20px;
        margin-right: 120px;
    }
}

.gongying {
    width: 100%;
    text-align: center;

    tr {
        height: 50px;
        line-height: 50px;
    }
}
</style>